<template>
  <div class="view-content-box">
    <div class="head">
      <div class="title">钱包</div>
      <div class="wallet-box">
        <div class="d-flex a-center j-sb">
          <div class="name">
            {{ storeUser.dlsUserInfo.realName }}，您的账户余额（元）
          </div>
          <div class="detail" @click="toWalletList">明细</div>
        </div>
        <div class="num"> {{ storeUser.dlsUserInfo.amount }}</div>
      </div>
    </div>
    <div class="logout-btn" @click="logout">退出登录</div>
  </div>
</template>

<script setup>
import {
  postMpDeviceStatistics,
  postMpDevicePage,
  postAgentAuthLogout,
} from "@/api/index";
import { Dialog, Notify } from "vant";

import { onMounted } from "vue";
import { useStoreUser } from "@/store";
const storeUser = useStoreUser();

const router = useRouter();
const detail = ref({
  deviceNum: "112",
  errorNum: "112",
});
// const list = ref([]);
const getStatistics = () => {
  postMpDeviceStatistics().then((res) => {
    console.log(res);
    detail.value = res.data;
  });
};

const toWalletList = () => {
  router.push({
    path: "/wallet/list",
  });
};
const logout = () => {
  Dialog.confirm({
    title: "确认",
    message: "确认退出登录？",
  })
    .then(() => {
      storeUser.logout();
    })
    .catch(() => {
      // on cancel
    });
};

onMounted(() => {
  getStatistics();
  // getList();
});
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  height: 360px;
  background: url("@/assets/bg2.png") no-repeat center;
  position: relative;
  padding-top: 28px;
  .title {
    font-size: 40px;
    color: #151515;
    font-weight: 600;
    text-align: center;
  }
}
.wallet-box {
  // position: absolute;
  // top: 200px;
  margin: 60px auto;
  width: 686px;
  height: 348px;
  background: #ffffff;
  border-radius: 16px;
  padding: 60px 36px;
  .name {
    font-weight: 600;
    font-size: 28px;
    color: #6c6c6c;
  }
  .detail {
    width: 104px;
    height: 56px;
    line-height: 56px;
    border-radius: 28px;
    border: 3px solid #ff4e00;
    text-align: center;
    font-size: 26px;
    color: #ff4e00;
  }
  .num {
    font-weight: 600;
    font-size: 88px;
    color: #151515;
    margin-top: 58px;
  }
}
.logout-btn {
  font-weight: 600;
  font-size: 36px;
  color: #151515;
  background: #fedc00;
  width: 640px;
  height: 88px;
  border-radius: 44px;
  margin: 300px auto;
  text-align: center;
  line-height: 88px;
}
</style>
